<template>
	<view>
		<view class="detail">
			<view class="main-box">
				<view class="head-box theme-colors">
					<view class="prop-up"></view>

					<view class="item z-padding-24">
						<image class="img-box" :src="cdn(info.logo_image)" mode="aspectFill"></image>
						<view class="z-flex-1 z-margin-l-24">
							<view class="item-title">{{ info.name }}</view>
							<view class="z-flex-c-s-b z-margin-t-48">
								<view class="item-name">{{ info.leader_name }}</view>
								<view class="relation-btn" @tap="call">联系TA</view>
							</view>
						</view>
					</view>
				</view>
				<view class="z-font-30 z-padding-32">店铺简介</view>
				<view class="introduce z-font-30 z-padding-32">
					{{ info.intro }}
				</view>
			</view>

			<!-- 按钮 -->
			<view class="order-btn-box" :style="'padding-bottom:' + safeBottom">
				<view class="btn z-text-c theme-colors" @tap="join">加入商家</view>
			</view>
		</view>
		
		<!-- 弹出 -->
		<u-popup :round="10" mode="center" :show="show" @close="onClose">
			<view class="z-padding-32">
				<view class="merchant-pop z-padding-24 z-margin-t-24">
					<image class="img-box" :src="cdn(info.logo_image)"></image>
					<view class="z-margin-l-24 z-flex-1">
						<view class="merchant-title z-font-30">{{ info.name }}</view>
						<view class="merchant-remark text_999 z-font-22 z-margin-t-24">{{ info.intro }}</view>
					</view>
				</view>
		
				<view class="certain-btn z-text-c" @tap="certainJoin">确定加入</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			shop_id: '',
			info: '',
			show: false,
			safeBottom: `20px`
		};
	},
	onLoad(options) {
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on('shopInfo', (data) => {
			this.info = data;
		});
	},
	methods: {
		call() {
			uni.makePhoneCall({
				phoneNumber: this.info.leader_mobile
			});
		},
		onClose() {
			this.show = false;
		},
		certainJoin() {
			this.http.post('skill/joinshop', { id: this.info.id, type: 0 }).then((res) => {
				this.show = false;
				this.util.toast(res.msg);
			});
		},
		join() {
			this.show = true;
		}
	}
};
</script>

<style>
.detail {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 100rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.main-box {
	flex: 1;
	overflow-y: auto;
}
.head-box {
	padding-bottom: 100rpx;
}

.item {
	width: 636rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	display: flex;
	align-items: center;
}

.prop-up {
	height: 52rpx;
}

.img-box {
	width: 154rpx;
	height: 154rpx;
	background: #d9d9d9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
}

.item-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #1c274c;
}

.item-name {
	font-size: 26rpx;
	font-weight: 500;
	color: #6b738b;
}

.relation-btn {
	width: 161rpx;
	height: 56rpx;
	background: #1677ff;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
	line-height: 56rpx;
}

.introduce {
	position: relative;
	background-color: #fff;
	border-radius: 50rpx 50rpx 0rpx 0rpx;
	line-height: 50rpx;
	white-space: pre-wrap;
}

.order-btn-box {
	width: 750rpx;
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	opacity: 1;
}

.btn {
	width: 686rpx;
	height: 98rpx;
	border-radius: 10rpx 10rpx 10rpx 10rpx;
	opacity: 1;
	line-height: 98rpx;
	margin: auto;
	margin-top: 14rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: #ffffff;
}

/* 弹出层 */
.merchant-pop {
	width: 496rpx;
	background: #f5f7f9;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	display: flex;
	align-items: center;
}

.certain-btn {
	width: 496rpx;
	height: 100rpx;
	background: #1677ff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
	margin-top: 42rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	line-height: 100rpx;
}

.merchant-remark {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
